import { Button } from "~/registry/miami/ui/button"
import {
   Dialog,
   DialogContent,
   DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
} from "~/registry/miami/ui/dialog"
import { Input } from "~/registry/miami/ui/input"
import { Label } from "~/registry/miami/ui/label"

export function PresetSave() {
   return (
      <Dialog>
         <DialogTrigger asChild>
            <Button variant="secondary">Save</Button>
         </DialogTrigger>
         <DialogContent className="sm:max-w-[475px]">
            <DialogHeader>
               <DialogTitle>Save preset</DialogTitle>
               <DialogDescription>
                  This will save the current playground state as a preset which
                  you can access later or share with others.
               </DialogDescription>
            </DialogHeader>
            <div className="grid gap-4 py-4">
               <div className="grid gap-2">
                  <Label htmlFor="name">Name</Label>
                  <Input id="name" autoFocus />
               </div>
               <div className="grid gap-2">
                  <Label htmlFor="description">Description</Label>
                  <Input id="description" />
               </div>
            </div>
            <DialogFooter>
               <Button type="submit">Save</Button>
            </DialogFooter>
         </DialogContent>
      </Dialog>
   )
}
